<style>
.ddprodr-swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.ddprodr-body {
    display: flex;
}
.ddprodr-list {
    width: 33.33%;
    padding: 0 15px;
}
.ddprodr-title {
    color: #000;
    padding: 8px 0;
}
.ddprodr-buttom {
    margin-top: 30px;
}
.ddprodr-buttom a {
    display: inline-block;
    text-decoration: underline;
    text-transform: uppercase;
}
.ddprodr-top-sub {
    line-height: 1.4;
}
.swiper-button-prev.ddprodr-prev, .swiper-button-next.ddprodr-next {
    background-image: unset;
}
@media(max-width:768px){
.ddprodr-swiper {
    display: none;
}
.ddpro-details-header.open~.ddpro-details-box .ddprodr-swiper {
    display: block;
}
}  
</style>
 
<div class="ddpro-details-main">

    <div class="ddpro-details-item ddpro-details-style3" style="background: {{ section.settings.bg }};">
        <div class="ddpro-details-header">{{ section.settings.bb_title }}</div>
        <div class="ddpro-details-box {% if section.settings.overturn %}ddpro-details-row-reverse{%endif%}">
            <div class="ddpro-details-left">
              <img class="ddpro-details-picture" src="{{ section.settings.image | img_url: 'master' }}">
            </div>
            <div class="ddpro-details-right">
              <div class="ddprodr-swiper">
                <div class="swiper-wrapper">
                  {% for block in section.blocks %}
                    <div class="swiper-slide">
                      <div class="ddprodr-box">
                          <div class="ddprod-title">{{ block.settings.ctitle }}</div>
                          <div class="ddprodr-top-sub">{{ block.settings.ctext }}</div>
                          <div class="ddprodr-body">
                              {% if block.settings.image_icon1 %}
                              <div class="ddprodr-list">
                                  <img class="ddprodr-top" src="{{ block.settings.image_icon1 | img_url: 'master' }}">
                                  <div class="ddprodr-title">{{ block.settings.title1 }}</div>
                                  <div class="ddprodr-text">{{ block.settings.text1 }}</div>
                              </div>
                              {% endif %}
                              {% if block.settings.image_icon2 %}
                              <div class="ddprodr-list">
                                  <img class="ddprodr-top" src="{{ block.settings.image_icon2 | img_url: 'master' }}">
                                  <div class="ddprodr-title">{{ block.settings.title2 }}</div>
                                  <div class="ddprodr-text">{{ block.settings.text2 }}</div>
                              </div>
                              {% endif %}
                              {% if block.settings.image_icon3 %}
                              <div class="ddprodr-list">
                                  <img class="ddprodr-top" src="{{ block.settings.image_icon3 | img_url: 'master' }}">
                                  <div class="ddprodr-title">{{ block.settings.title3 }}</div>
                                  <div class="ddprodr-text">{{ block.settings.text3 }}</div>
                              </div>
                              {% endif %}
                          </div>
                          <div class="ddprodr-buttom">
                              <a href="{{ block.settings.link_url }}">{{ block.settings.link_text }}</a>
                          </div>
                      </div>
                    </div>
                  {% endfor %}                  
                </div>
                {% if section.blocks.size >0 %}
                  <div class="swiper-button-prev ddprodr-prev">
                    <svg class="ddprodr-prev-icon" viewBox="0 0 1024 1024" width="30" height="30"><path d="M721.9968 979.0208l47.0528-47.104-419.94752-419.98848 419.94752-419.90144-47.05792-47.04768-419.93216 419.89632h-0.00512l-47.104 47.09888 47.04768 47.04256z" fill="#000000" p-id="1473"></path></svg>                    
                  </div>
                  <div class="swiper-button-next ddprodr-next">
                    <svg class="ddprodr-next-icon" viewBox="0 0 1024 1024" width="30" height="30"><path d="M301.99808 44.9792l-47.04768 47.09888 419.9424 419.98848-419.9424 419.90144 47.0528 47.0528 419.93728-419.89632h0.00512l47.104-47.09888-47.0528-47.04768z" fill="#000000" p-id="2552"></path></svg>
                  </div>
                {% endif %}
              </div>
            </div>
        </div>
    </div>
      
    
</div>

<script> 
window.ddproswiper=null;
$(function(){
{% if section.blocks.size >0 %}
window.ddproswiper=new Swiper(".ddprodr-swiper", {
  slidesPerView : 1,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});
{% endif %}
  
})  
</script>
{% schema %}
{
  "name": "产品页 - 产品详情(轮播)",  
  "class":"ddpro-details-swiper",
  "settings": [
    {
      "type": "color",
      "id": "bg",
      "label": "背景颜色",
      "default": "#fff"
    },
    {
      "type": "checkbox",
      "id": "overturn",
      "label": "开启翻转",
      "default": false
    },
    {
      "type": "text",
      "id": "bb_title",
      "label": "标题"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "模块主图"
    }
  ],
  "blocks": [
    {
      "type": "style",
      "name": "图文样式",
      "settings": [
  	    {
          "type": "textarea",
          "id": "ctitle",
          "label": "描述标题"
        },
  	    {
          "type": "richtext",
          "id": "ctext",
          "label": "描述文案"
        },
        {
          "type": "image_picker",
          "id": "image_icon1",
          "label": "描述图片 1"
        },
  	    {
          "type": "text",
          "id": "title1",
          "label": "描述标题1"
        },        
  	    {
          "type": "text",
          "id": "text1",
          "label": "描述文案1"
        },
        {
          "type": "image_picker",
          "id": "image_icon2",
          "label": "描述图片2"
        },
  	    {
          "type": "text",
          "id": "title2",
          "label": "描述标题2"
        },        
  	    {
          "type": "text",
          "id": "text2",
          "label": "描述文案2"
        },
        {
          "type": "image_picker",
          "id": "image_icon3",
          "label": "描述图片3"
        },
  	    {
          "type": "text",
          "id": "title3",
          "label": "描述标题3"
        },        
  	    {
          "type": "text",
          "id": "text3",
          "label": "描述文案3"
        },
  	    {
          "type": "richtext",
          "id": "link_text",
          "label": "链接文案"
        },
  	    {
          "type": "url",
          "id": "link_url",
          "label": "链接"
        }
      ]
    }
  ]
}
{% endschema %}

